:root {
  // Цвет для текста
  --text-color: #1E1E1E;
  --text-muted: #8D8D8D;
  --text-card-dark-blue: #0D1B39;
  --accent: #E58411;

  --header-text-color: #fff;

  --footer-accent: #F6973F;
  --footer-bg: #2D2F33;
  --footer-text-color: rgba(255, 255, 255, 0.8);

  //Цвета для элементов
  --ui-orang: #E58411;
  --ui-biruza: #00D6C9;
  --ui-gray: #7C7C7C;
  --ui-dark-blue: #0D1B39;

  // определяем основной шрифт
  --font-main: 'Gilroy', sans-serif;
  // определяем шрифт в карточках
  --font-cards: "Inter", sans-serif;
  // Определяем шрифт в footer
  --font-footer-accent: "DM Sans", sans-serif;
}

/* используем SCSS миксин для медиазапроса retina (как, смотрим документацию SCSS). В этот миксин записываем весь медиазапрос. В параметр миксина передаем переменную, которую мы будем использовать (в нашем случае это будет картинка). Фильм, время 1:02:00
*/
@mixin retina-bg ($image) {

  // Пишем код миксина (т.е. что он будет передавать)
  @media (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    background-image: $image;
  }
}

// Делаем миксин медиазапроса на разрешение экрана 1440px
@mixin desktop-small () {
  @media (max-width: 1440px) {
    // сюда будет вставляться блок со стилями
    @content;
  }
}

// Делаем миксин медиазапроса на разрешение экрана 992px
@mixin tablet () {
  @media (max-width: 992px) {
    // сюда будет вставляться блок со стилями
    @content;
  }
}

// Делаем миксин медиазапроса на разрешение экрана 630px
@mixin mobile () {
  @media (max-width: 630px) {
    // сюда будет вставляться блок со стилями
    @content;
  }
}